<script lang="ts" setup>
import * as application from '@/api/application'
import type { ApplicationForm } from '@/api/application/types';
import * as realm from '@/api/realm'
import type { FormRules } from 'element-plus';

const dialogVisible = ref(false)

const props = reactive<ModalWindowProp>({
    title: ''
})

const defaultData: ApplicationForm = {
    realmId: '',
    name: '',
    code: '',
} 
const formData = ref(defaultData)
const formRef = ref()
const formRules = reactive<FormRules<ApplicationForm>>({
    realmId: [
        {required: true, message: '应用域不能为空'}
    ],
    name: [
        {required: true, message: '应用名称不能为空'}
    ],
    code: [
        {required: true, message: '应用代码不能为空'}
    ],
    tenant: [
        {required: true, message: '租户模式不能为空'}
    ],
})

const open = async (dialogProp: ModalWindowProp) => {
    if(dialogProp.context !== undefined) {
        formData.value = await application.get(dialogProp.context)
    }

    props.title = dialogProp.title
    props.context = dialogProp.context

    dialogVisible.value = true
}

defineExpose({
    open
})

const emit = defineEmits(['close'])

const realmOptions = ref<OptionItem[]>()
const tenantOptions = ref<OptionItem[]>()

onMounted(async () => {
    realmOptions.value = await realm.options()
    tenantOptions.value = await application.tenantOptions()
})

const submit = async () => {
    console.log('submit')
    await formRef.value.validate(async (valid: boolean) => {
        console.log('valid', valid)
        if(valid) {
            let result: ApiResult
            if(props.context === undefined) {
                result = await application.add(formData.value)
            } else {
                result = await application.edit(props.context, formData.value)
            }

            if(result.success) {
                ElMessage.success(result.message)
                emit('close')
                
                dialogVisible.value = false
            } else {
                ElMessage.error(result.message)
            }
        }
    })
    
}
</script>

<template>
    <el-dialog v-model="dialogVisible" :title="props.title">
        <el-form ref="formRef" :model="formData" :rules="formRules" label-width="120px">
            <el-form-item prop="realmId" label="应用域">
                <el-select v-model="formData.realmId">
                    <el-option v-for="option in realmOptions" :key="option.value" :label="option.label" :value="option.value"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item prop="name" label="应用名称">
                <el-input v-model="formData.name"></el-input>
            </el-form-item>
            <el-form-item prop="code" label="应用编码">
                <el-input v-model="formData.code"></el-input>
            </el-form-item>
            <el-form-item prop="tenant" label="租户模式">
                <el-select v-model="formData.tenant">
                    <el-option v-for="option in tenantOptions" :key="option.value" :label="option.label" :value="option.value"></el-option>
                </el-select>
            </el-form-item>
        </el-form>
        <template #footer>
            <el-button type="primary" @click="submit">保存</el-button>
        </template>
    </el-dialog>
</template>

<style lang="scss" scoped>

</style>